<!DOCTYPE html>
<html>
<link rel="match" href="../expected/css-filter-ref.html" />
<style>
    body {
        font-size: 0;
    }

    img {
        width: 50px;
    }
</style>

<!-- blur() -->
<img src="../data/car.png" style="filter: blur()">
<img src="../data/car.png" style="filter: blur(0)">
<img src="../data/car.png" style="filter: blur(4px)">
<img src="../data/car.png" style="filter: blur(calc(4 * 1px))">

<!-- drop-shadow() is tested in css-filter-drop-shadow.html -->

<!-- hue-rotate() -->
<img src="../data/car.png" style="filter: hue-rotate()">
<img src="../data/car.png" style="filter: hue-rotate(0)">
<img src="../data/car.png" style="filter: hue-rotate(90)">
<img src="../data/car.png" style="filter: hue-rotate(90deg)">
<img src="../data/car.png" style="filter: hue-rotate(-90deg)">
<img src="../data/car.png" style="filter: hue-rotate(calc(180 * 1deg))">

<!-- simple color filters -->
<!-- omitted -->
<img src="../data/car.png" style="filter: brightness()">
<img src="../data/car.png" style="filter: contrast()">
<img src="../data/car.png" style="filter: grayscale()">
<img src="../data/car.png" style="filter: invert()">
<img src="../data/car.png" style="filter: opacity()">
<img src="../data/car.png" style="filter: sepia()">
<img src="../data/car.png" style="filter: saturate()">

<!-- number -->
<img src="../data/car.png" style="filter: brightness(0.75)">
<img src="../data/car.png" style="filter: contrast(0.75)">
<img src="../data/car.png" style="filter: grayscale(0.75)">
<img src="../data/car.png" style="filter: invert(0.75)">
<img src="../data/car.png" style="filter: opacity(0.75)">
<img src="../data/car.png" style="filter: sepia(0.75)">
<img src="../data/car.png" style="filter: saturate(0.75)">

<!-- percentage -->
<img src="../data/car.png" style="filter: brightness(75%)">
<img src="../data/car.png" style="filter: contrast(75%)">
<img src="../data/car.png" style="filter: grayscale(75%)">
<img src="../data/car.png" style="filter: invert(75%)">
<img src="../data/car.png" style="filter: opacity(75%)">
<img src="../data/car.png" style="filter: sepia(75%)">
<img src="../data/car.png" style="filter: saturate(75%)">

<!-- calculated number -->
<img src="../data/car.png" style="filter: brightness(calc(3 / 4))">
<img src="../data/car.png" style="filter: contrast(calc(3 / 4))">
<img src="../data/car.png" style="filter: grayscale(calc(3 / 4))">
<img src="../data/car.png" style="filter: invert(calc(3 / 4))">
<img src="../data/car.png" style="filter: opacity(calc(3 / 4))">
<img src="../data/car.png" style="filter: sepia(calc(3 / 4))">
<img src="../data/car.png" style="filter: saturate(calc(3 / 4))">

<!-- calculated percentage -->
<img src="../data/car.png" style="filter: brightness(calc(3 * 25%))">
<img src="../data/car.png" style="filter: contrast(calc(3 * 25%))">
<img src="../data/car.png" style="filter: grayscale(calc(3 * 25%))">
<img src="../data/car.png" style="filter: invert(calc(3 * 25%))">
<img src="../data/car.png" style="filter: opacity(calc(3 * 25%))">
<img src="../data/car.png" style="filter: sepia(calc(3 * 25%))">
<img src="../data/car.png" style="filter: saturate(calc(3 * 25%))">
